<template>
<div>
  <div class="import_box">
    <el-button
        size="mini"
        type="primary"
        class="import_button"
        @click="goFile">
      <i class="el-icon-upload2"></i> 上传文件
    </el-button>

    <input
        type="file"
        style="display: none;"
        id="file"
        ref="files"
        accept="application/vnd.ms-excel,.xlsx"
        @click="e => {e.target.value = '';}"
        @change="showChange($event)"
    />
    <input
        v-model="this.fileName"
        placeholder="文件大小不能超过10M  仅支持excel"
        disabled="true"
        style="outline: none; border: 0; width: 500px;"
        class="showDetail"
    />
  </div>
</div>
</template>

<script>
import ParamsUtil from "../../utils/ParamsUtil";

export default {
  name: "UserImport",
  data() {
    return {
      fileName: '',
    }
  },
  methods: {
    goFile() {
      this.$refs.files.click();
    },
    showChange(e) {
      let file = e.target.files[0];
      this.fileName = file.name;
      let formData = new FormData();
      formData.append('file',file)

      this.$axios.post(`${this.HOST}user/import/student`,{
        formData
      },{
        header: {
          'Content-Type': 'multipart/form-data'
        }
      }).then(res => {
        this.$message({
          message: res.data.message,
          type: 'success',
          offset: 90,
          duration: 1000
        })
      })
    },
  }
}
</script>

<style scoped>
.import_box {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 50%;
  left: 50%;
  margin-left: -100px;
  margin-top: -100px;
}

.import_box .import_button {
  position: absolute;
  width: 100px;
  height: 40px;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -50px;
}

.import_box .showDetail {
  position: absolute;
  top: 70%;
  left: 0;
}
</style>
